<template>
  <div class="wrapper" ref="bscroll">
    <div class="content">
      <h1>推荐歌单</h1>
      <section class="recommend">
        <ul>
          <li v-for="{id,img,writing} in coming" :key="id" >
           
            <router-link to="/home/hot">
                <div>
                    <img :src="img" alt />
                    <p>{{writing}}</p>
                </div>
            </router-link>
          </li>
        </ul>
      </section>
      <h2>最新音乐</h2>
      <div class="new-music">
        <section v-for="m of music" :key="m.name">
          <figure>
            <figcaption>{{m.name}}</figcaption>
            <figcaption>{{m.song.artists[0].name}}-{{m.song.name}}</figcaption>
          </figure>
          <figure>
              <figcaption>
                  <mark></mark>
              </figcaption>
          </figure>
        </section>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
import MouseWheel from "@better-scroll/mouse-wheel";
import { getRecommendMusic, getRecommend } from "../api/index";

BScroll.use(MouseWheel);

export default {
  components: {},
  data: function() {
    return {
      music: [],
      coming: []
    };
  },

  mounted() {
    this.bScroll = new BScroll(this.$refs["bscroll"], {
      click:true,
      scrollY: true,
      pullUpLoad: true,
      mouseWheel: {
        speed: 20,
        invert: false,
        easeTime: 300
      }
    });
    getRecommend()
      .then(data => {
        const { coming } = data;
        // console.log(coming);
        this.coming = coming;
      })
      .catch(err => {
        console.error(err);
      });

    getRecommendMusic()
      .then(data => {
        const { result: music } = data;

        this.music = music;

        this.$nextTick(() => {
          this.bScroll.refresh();
        });
      })
      .catch(err => {
        console.error(err);
      });
  }
};
</script>

<style lang="scss" scoped>
.wrapper {

   height: 5rem;
  .content {
    h1 {
       height: 0.6rem;
       line-height: 0.6rem;
       background: #fff;
       font-size: 0.18rem;
       font-weight: normal;
       padding-left: 0.1rem;
    }
    .recommend {
      background: #fff;
      ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        li {
          width: 33%;
          margin-bottom: 0.05rem;
         
          img {
            height: 1.2rem;
            width: auto;
          }
          p{
              color: #000;
              font-size: 0.13rem;
              padding: 0.05rem 0.07rem;
          }
        }
      }
    }
    h2 {
      height: 0.6rem;
      line-height: 0.6rem;
      background: #fff;
      font-size: 0.18rem;
      font-weight: normal;
      padding-left: 0.1rem;
    }
    .new-music {
      display: flex;
      flex-direction: column;
      section {
        padding:0 0.1rem;
        display: flex;
        justify-content: space-between;
        height: 0.6rem;
        background: #fff;
        border-bottom: 1px solid #ccc;
        figure:nth-child(1){
            
            figcaption:nth-child(1){
                font-size: 0.16rem;
                line-height: 0.4rem;
                font-weight: normal;
            }
            figcaption:nth-child(2){
                font-size: 0.12rem;
                color: #888;
            }
        }
        figure:nth-child(2){
            display: flex;
            align-items: center;
            figcaption{
                width:0.2rem;
                height: 0.2rem;
                border: 1px solid #888;
                border-radius: 50%;
                line-height: 0.6rem;
                display: flex;
                align-items: center;
                justify-content: center;
                mark{
                    display: block;
                    border: 0.05rem solid;
                    border-color:transparent transparent transparent #888; 
                    margin-left:0.07rem; 
                }
            }
           
        }
      }
    }
  }
}
</style>